<template>
  <div class="playReMain">
    <div class="title">
      <p @click="()=>{$router.go(-1)}">优秀作品展示</p>
      <i
        class="iconfont icon-left"
        style="position:absolute;left:10px;top:10px;font-size:14px"
        @click="()=>{$router.go(-1)}"
      ></i>
    </div>
    <titleImage />
    <div class="formSty">
      <span class="from_title">优秀作品展示</span>
      <div class="videoContent" id="videoContent"></div>
    </div>
  </div>
</template>
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>

<script>
// import aliplayer from "../../../../components/component/AliPlayer.vue";
import titleImage from "../../../../components/component/titleImg.vue";
export default {
  name: "app",
  components: {
    titleImage
    // "ali-player": aliplayer
  },
  data: () => ({
    videoItem: []
  }),
  created() {},
  mounted() {
    this.$axios.notLoggedIn(`ym/singer/video-list`).then(msg => {
      console.log(msg);
      // if (msg.code === 0) {
        let videoInfo = msg.records;
        this.videoItem = videoInfo;
        let idIndex = 1;
        let videoContent = document.querySelector("#videoContent");
        for (let i = 0; i < videoInfo.length; i++) {
          this.$axios
            .notLoggedIn(
              `ym/public/play-auth?videoId=${videoInfo[i].video}`
            )
            .then(res => {
              var videoDiv = document.createElement(`div${idIndex}`);
              // var videoTitle = document.createElement("p");
              // videoTitle.innerHTML = "视频";
              videoDiv.className = "videoDiv";
              videoDiv.id = `J_prismPlayer${idIndex}`;
              videoContent.appendChild(videoDiv);
              // videoContent.appendChild(videoTitle);
              var player = new Aliplayer(
                {
                  id: `J_prismPlayer${idIndex}`,
                  width: "50%",
                  height: "100px",
                  autoplay: false,
                  //通过vid用接口获取播放权限（playauth）
                  vid: res.videoMeta.videoId,
                  playauth: res.playAuth,
                  skinLayout: [
                    { name: "bigPlayButton", align: "blabs", x: 60, y: 80 },
                    { name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
                    { name: "infoDisplay" },
                    { name: "tooltip", align: "blabs", x: 0, y: 56 },
                    { name: "thumbnail" },
                    {
                      name: "controlBar",
                      align: "blabs",
                      x: 0,
                      y: 0,
                      children: [
                        { name: "progress", align: "blabs", x: 0, y: 44 },
                        { name: "playButton", align: "tl", x: 15, y: 12 },
                        { name: "fullScreenButton", align: "tr", x: 10, y: 12 }
                      ]
                    }
                  ],
                  cover: res.videoMeta.coverURL,
                  encryptType: 1
                },
                function(player) {}
              );
              idIndex += 1;
            });
        }
      // }
    });
  },
  methods: {
    play(event) {
      console.log(event);
    }
  }
};
</script>
<style lang="scss">
.videoContent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  color: #333;
  font-size: 14px;
  margin: 10px 0;
  .videoDiv {
    flex: 0 0 48.6%;
  }
  p {
    margin: 0;
    padding: 0;
  }
  .prism-player {
    margin: 2px;
  }
}
.playReMain {
  margin: 0;
  padding: 0;
  position: absolute;
  min-height: 100%;
  width: 100%;
  color: #fff;
  background: #ffcd5b;
  .title {
    background: #ffaf03;
    p {
      text-align: center;
      margin: 0;
      height: 40px;
      line-height: 40px;
    }
  }
  .formSty {
    width: 92%;
    margin: 20px auto;
    padding-bottom: 10px;
    background: #fff1d2;
    border-radius: 6px;
    .from_title {
      display: inline-block;
      padding: 6px;
      background: #ffaf03;
      width: 100px;
      border-radius: 0 24px 24px 0;
      font-size: 14px;
      margin: 20px 0 0 -20px;
      color: #5c4b28;
    }
    .fromContent {
      p {
        color: #333;
        text-align: left;
        font-size: 12px;
        padding: 14px 6px;
      }
      .selectSty {
        display: flex;
        justify-content: center;
        align-items: center;
        select {
          width: 30%;
          text-align: center;
          background: #ffe8b5;
          border: none;
          height: 28px;
          margin: 0 2px;
          option {
            text-align: center;
          }
        }
      }
      .fromInput {
        padding: 4px 0;
        .textInput {
          width: 90%;
          background: #ffe8b5;
          border-radius: 4px;
          padding: 6px;
          margin: 6px auto;
        }
      }
    }
    .videoUploadSty {
      p {
        margin: 0;
        padding: 0;
        color: #333;
      }
      display: flex;
      flex-direction: column;
      padding: 0 15px;
    }
    .bottomMessage {
      width: 92%;
      color: #ffe8b5;
      margin: 0 auto;
    }
    .submitButton {
      display: block;
      width: 60%;
      margin: 40px auto;
      background: #ffaf03;
      border-radius: 30px;
      color: #fff;
    }
  }
}
.van-cell-group {
  background: #fff1d2;
}
.van-hairline--top-bottom {
  background: #fff1d2;
}
.prism-player .prism-big-play-btn {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: 0px;
  position: relative;
  top: 25%;
}
.prism-player .prism-fullscreen-btn {
  width: 20px;
  height: 20px;
}
.outter {
  display: none;
}
</style>

